import React, { Component } from 'react'

import {
    View
} from 'react-native'

import { Label,ScaleSlider } from 'iftide'

class Basic4 extends Component {
    constructor(props) {
        super(props)
        this.state = {
            value: '二月',
            defaultValue: 2,
            min: 1,
            max: 12,
            unitAmount: 1,
            unitWidth: 100,
            longScaleColor: 'pink',
            shortScaleColor: 'red',
            unitStep: 1,
            oddEven: 'normal',
            sliderList: [
                {
                    name: '一月',
                    value: 1
                },
                {
                    name: '二月',
                    value: 2
                },
                {
                    name: '三月',
                    value: 3
                }, {
                    name: '四月',
                    value: 4
                }, {
                    name: '五月',
                    value: 5
                }, {
                    name: '六月',
                    value: 6
                },
                {
                    name: '七月',
                    value: 7
                },
                {
                    name: '八月',
                    value: 8
                },
                {
                    name: '九月',
                    value: 9
                }, {
                    name: '十月',
                    value: 10
                },
                {
                    name: '十一月',
                    value: 11
                },
                {
                    name: '十二月',
                    value: 12
                },
            ]
        }
    }

    back(e) {
        console.log(e, 'e')
        this.setState({
            value: e.value
        })

    }

    render() {
        return (
            <View>
                <Label style={{ marginBottom: 10 }} text={'自定义刻度尺-月份'} color={'black'}></Label>
                <Label ref='oValue' text={`${this.state.value}`}></Label>
                <ScaleSlider
                    {...this.state}
                    endBack={this.back.bind(this)}
                />
                <View style={{ height: 1, backgroundColor: '#000', marginBottom: 10 }}>
                </View>
            </View>
        )
    }
    
}

export default Basic4